<template>
  <div class="box">
    <el-card>
      <div class="bos">
        <img :src="imgUsr.avatar" class="img" />
        <h3 class="h3">你好:{{ imgUsr.name }}</h3>
      </div>
    </el-card>
    <SvgIcon
      name="welcome"
      width="500px"
      height="300px"
      class="buttons"
    ></SvgIcon>
  </div>
</template>
<script setup lang="ts">
import { useCounterStore } from '@/stores/counter'
import { ref } from 'vue'

let imgUsr = ref(useCounterStore().getInfo.data)
</script>
<style scoped>
.bos {
  display: flex;
  align-items: center;
  .h3 {
    font-size: 40px;
  }
}

.buttons {
  display: flex;
  justify-content: center;
}
.img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin: 0px 20px;
}
</style>
